<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Scroll Content (jquery.scrollContent.js)</title>
<script type="text/javascript" src="../jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.scrollContent.js"></script>

<style>
*{margin:0;padding:0;}
h3{ color:#666666;margin-top:10px;padding:10px 5px; background:#FFFFCC;}
h4{margin-top:10px;padding:10px 5px; background:#eee;}
h5{margin-top:20px;}
.nav{text-align:right;padding:0;margin:0;}

.clearFloat { clear: left; overflow:hidden; line-height:0; height:0; line-height:0; }
.floatLeft { float:left; }
.scrollContentBorder { border: solid 1px #ccc; padding:10px; }
.scrollContentContainer ul li {  width:150px; height:140px; text-align:center; margin-top:4px; /*border:1px solid #e8e8e8*/ }
.scrollContentContainer ul li img {  border: solid 1px #ccc; margin:0 auto; display:block; }
.scrollContentContainer ul li p { text-align:center; }
.scrollContentContainer { margin:20px; }

</style>

</head>
<body style="padding:10px;">

	<p class="nav"><small><a href="https://jsskep.googlecode.com/svn/trunk/">Cssrain google SVN</a> | <a href="http://www.cssrain.cn">Cssrain blog</a></small></p>
	<h1>Scroll Content</h1>
	<h3>用法：$(selector).scrollContent({options});</h3>

	<h4>例子1：</h4>
	<div id="example1" class="tabContainer">
		<div id="example-1-tab-2" style="overflow:auto">
			<div class="scrollContentContainer">
				<button class="scrollContentExample1BtnLeft floatLeft">previous</button>  
				<div class="scrollContentExample1 floatLeft scrollContentBorder">
					<ul>
					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 1</p>
					</li>

					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 2</p>
					</li>

					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 3</p>
					</li>

					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 4</p>
					</li>

					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 5</p>
					</li>

					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 6</p>
					</li>

					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 7</p>
					</li>
					</ul>
				</div>
				<button class="scrollContentExample1BtnRight floatLeft">next</button>
				<div class="clearFloat"><!--&nbsp;--></div>
			</div>

		<script type="text/javascript">
		$(".scrollContentExample1").scrollContent({
		btnNext: ".scrollContentExample1BtnRight",
		btnPrev: ".scrollContentExample1BtnLeft",
		speed: 500,
		visible: 3
		});
		</script>
		</div>
	</div>

<hr /><!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

<h4>例子2：</h4>
<div id="example2" class="tabContainer">
	<div id="example-2-tab-2" style="overflow:auto">

		<div class="scrollContentContainer">
			<button class="scrollContentExample2BtnLeft floatLeft">previous</button>  
			<div class="scrollContentExample2 floatLeft scrollContentBorder">
				<ul>
					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 1</p>
					</li>
					
					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 2</p>
					</li>
					
					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 3</p>
					</li>
					
					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 4</p>
					</li>
					
					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 5</p>
					</li>
					
					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 6</p>
					</li>
					
					<li><img src="exampleImage.gif" alt="" width="100" height="100" />
					<p>Content 7</p>
					</li>
				</ul>
			</div>
			<button class="scrollContentExample2BtnRight floatLeft">next</button>
			<div class="clearFloat"><!--&nbsp;--></div>
			<div style="text-align:center; width:305px;">
				<button class="scrollItem1">1</button>
				<button class="scrollItem2">2</button>
				<button class="scrollItem3">3</button>
				<button class="scrollItem4">4</button>
				<button class="scrollItem5">5</button>
				<button class="scrollItem6">6</button>
				<button class="scrollItem7">7</button>
			</div>
		</div>

		<script type="text/javascript">
		$(".scrollContentExample2").scrollContent({
			btnNext: ".scrollContentExample2BtnRight",
			btnPrev: ".scrollContentExample2BtnLeft",
			speed: 500,
			btnSpecific: ['.scrollItem1','.scrollItem2','.scrollItem3','.scrollItem4','.scrollItem5','.scrollItem6','.scrollItem7']
		});
		</script>

	</div>
</div>

<h5><a href="http://swip.codylindley.com/scrollContentDemo.html">Scroll Content</a></h5>


</body>
</html>
